import React, { useState } from 'react'
import './question.less'
// import EventNoteIcon from '@material-ui/icons/EventNote';
import { sendAnswerApi } from '@/Api'

export default function Question(props) {
    // 用户答案
    const [userAnswer, setUserAnwer] = useState('')
    const [isAnwsered, setisAnwsered] = useState(false)
    const SureAnswer = (item) => {
        setisAnwsered(true)
        // 把作答数据发到服务器
        const { categoryCode, id } = props.data
        console.log(props);
        sendAnswerApi({
            categoryCode,
            actionType: 'exam_test',
            userAnswer,
            actionCode: props.actionCode,
            id
        }).then(res => {
            // console.log(res);
            if (res.errCode === 0) {
                props.success('提交成功')
            }
        }).catch(err => console.dir(err))
    }
    return (
        <div className="question-item">
            {/* <div className="head">
                <div className="head-l">
                    <EventNoteIcon />
                    <span className="Num">9</span>
                    <span>/10</span>
                </div>
            </div> */}
            <div className="select">
                <div className="question">
                    <span className="type">{props.data.questionType === 'qa' ? '问答' : '编程'}</span>
                    <span>{props.data.title}</span>
                </div>
                {/* 如果是代码题，还要把代码放这 */}
                {
                    (() => {
                        if (props.data.questionType === 'code') {
                            return (
                                <div dangerouslySetInnerHTML={{ __html: props.data.content }}></div>
                            )
                        }
                    })()
                }
                <div className="ans">
                    <textarea value={userAnswer} onChange={(e) => setUserAnwer(e.target.value)} className="ans-area" placeholder="请在这里写上你的答案"></textarea>
                </div>
                <div className="result">
                    <div className="btn-sure" onClick={SureAnswer}>确认</div>
                    <div className="answer" style={{ display: isAnwsered ? 'block' : 'none' }}>
                        正确答案是： <div dangerouslySetInnerHTML={{ __html: props.data.answer }}></div>
                    </div>
                </div>
            </div>
        </div>
    )
}
